<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/v2.6.10/vue.js"></script>
		<link rel="stylesheet" href="css/1.css">
	</head>
	<body>
		<div id="app">
			<button @click="addOne">添加</button>
		 <div v-if="goods.length>0">
				<table>
					<tr>
						<th>id</th>
						<th>商品名称</th>
						<th>商品价格</th>
						<th>商品数量</th>
						<th>操作</th>
					</tr>
					<tr v-for="item,index in goods" :key="item">
						<td>{{item.id}}</td>
						<td>{{item.name}}</td>
						<td>{{item.price}}</td>
						<td><button @click="subcount(index)" :disabled="goods[index].num==1">-</button>
							{{item.num}}
							<button @click="addcount(index)">+</button>
						</td>
						<td><button @click="delOne(index)">移除</button></td>
					</tr>

					<tr v-if="add">
						<td><input v-model="id" type="text"></td>
						<td><input v-model="name" type="text"></td>
						<td><input v-model="price" type="text"></td>
						<td><input v-model="num" type="text"></td>
						<td><button @click="addSubmit">确定</button></td>
					</tr>

				</table>
				<h1>总价格：￥{{sumPrice}}</h1>
			</div>
			<div v-else>
				<h1>购物车为空！！</h1>
				<table v-if="add">
					<tr>
						<th>id</th>
						<th>商品名称</th>
						<th>商品价格</th>
						<th>商品数量</th>
						<th>操作</th>
					</tr>
					<tr>
						<td><input v-model="id" type="text"></td>
						<td><input v-model="name" type="text"></td>
						<td><input v-model="price" type="text"></td>
						<td><input v-model="count" type="text"></td>
						<td><button @click="queding">确定</button></td>
					</tr>
				</table>
			</div>

		</div>
	</body>
	<script>
		new Vue({
			el: '#app',
			data() {
				return {
					add: false,
					id: '',
		 		name: '',
					price: '',
					num: '',
					goods: [{
							id: 1,
							name: "充电宝",
							price: 23.22,
							num: 1
						},
						{
							id: 2,
							name: "小风扇",
							price: 52.33,
							num: 3
						},
						{
							id: 3,
							name: "小音箱",
							price: 32.22,
							num: 1
						}
					]
				}
			},
			methods: {
				addOne() {
					this.add = true
				},
				delOne(index) {
					this.goods.splice(index, 1)
				},
				addSubmit() {
					var Obj = {
						id: this.id,
						name: this.name,
						price: this.price,
						num: this.num
					}
					this.goods.push(Obj)
					this.add = false
				},
				addcount(index) {
					this.goods[index].num++
				},
				subcount(index) {
					this.goods[index].num--
				},

			},
			computed: {
				sumPrice() {
					var sum = 0;
					for (var i = 0; i < this.goods.length; i++) {
						sum = sum + (this.goods[i].price * this.goods[i].num)
					}
					return sum.toFixed(2);
				}
			}
		})
	</script>
	</body>
</html>
